el-submenu<!--
  功能：功能描述
  时间：2022年10月31日 22:38:57
  版本：v1.0
-->
<template>
  <el-menu
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      :collapse="isCollapse"
      :background-color="backgroundColor"
      router
  >
    <el-menu-item
        v-for="(item, index) in menu"
        :key="index"
        :index="item.path"
    >
      <i :class="item?.meta?.icon || 'el-icon-edit-outline'"></i>
      <span>{{ item.name }}</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
import {mapGetters} from "vuex";
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
  // 组件名称
  name: "Nav",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件,import引入的组件需要注入到对象中才能使用
  components: {},
  // 组件状态值
  data() {
    return {
      backgroundColor: "#fff",
    };
  },
  // 计算属性
  computed: {
    menu() {
      return this._menu
    },
    isCollapse() {
      return this._isCollapse
    },
    ...mapGetters(["_menu", "_isCollapse"]),
  },
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
  // 以下是生命周期钩子   注：没用到的钩子请自行删除
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu-item{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin-top: 1.5rem;
}

</style>
